<template>
    <div class="notice-container">
        <!-- 1.公告详情 -->
        <div class="content">
            <h1>{{ detail.notice_title + "...." }}</h1>
            <h3>
                &nbsp;&nbsp;&nbsp;&nbsp;{{ detail.notice_content }}
            </h3>
            <p>发布时间：{{ detail.notice_time }}</p>
        </div>
        <!-- 公告列表 -->
        <div class="sider">
            <a-list size="large" bordered :data-source="data" class="lists">

                <template #renderItem="{ item }">
                    <a-list-item :key="item.id" class="item">
                        <template #actions>
                            <span @click="getNoticeDetail(item)" class="lil-title">{{
                                    item.notice_title
                            }}</span>
                            <span>{{ item.notice_time }}</span>

                        </template>


                    </a-list-item>

                </template>

                <template #header class="header">
                    <h3 class="title">公告</h3>
                </template>
                <a-pagination class="pagination-notice" @change="pageChange" v-model:current="current" :total="total" />
            </a-list>
        </div>
    </div>
    <div class="footer"><a href="http://jgj.wuhan.gov.cn/">数据来源@武汉市公安局交通管理局</a></div>
</template>

<script setup>
import { ref, onMounted } from "vue";
/* 导入封装的请求 */
import { getNotice } from 'request/notice'

//存放所有公告 object
let data = ref([]);
//存放一项公告 object
let detail = ref({});
const current = ref(1)
const total = ref(null)
onMounted(async () => {
    // 获取所有公告
    const res = await getNotice(current.value, 8)
    console.log(res.data.code);
    if (res.data.code == 0) {
        console.log(res.data.result);
        data.value = res.data.result.data
        detail.value = res.data.result.data[0];
        total.value = res.data.result.total
    }
    // $api.getNotice().then((res) => {
    //     console.log(res);
    //     data.value = res.result;
    //     detail.value = res.result[0];
    // });
});
//点击获取一项公告详情
const getNoticeDetail = function (notice) {
    detail.value = notice;
};
/* 分页改变发送请求 */
const pageChange = async () => {
    // 获取所有公告
    const res = await getNotice(current.value, 8)
    console.log(res.data.code);
    if (res.data.code == 0) {
        console.log(res.data.result);
        data.value = res.data.result.data
        detail.value = res.data.result.data[0];
        total.value = res.data.result.total
    }
}
</script>

<style scope>
.notice-container {
    display: flex;
    margin: 0 auto;
    background: white;
    border: 1px solid #999;
    height: 65vh;
    min-height: 480px;
}

.footer {
    height: 5vh;
    display: flex;
    justify-content: center;
    align-items: center;
}


.content {
    min-height: 480px;
    height: 65vh;
    width: 55vw;
    padding: 5vh 2vw;
    line-height: 34px;
    border-right: 2px solid #999;
    box-sizing: border-box;
    background-color: rgb(24 144 255 / 39%)
}

p {
    margin-left: 8vw;
}

.sider {
    width: 50vw;
    background-color: rgb(139 243 241 / 18%)
}

.sider .title {
    margin: 0;
    color: rgb(62, 85, 165);
    font-weight: 700;
    font-size: 38px;
}

.ant-list-bordered {
    /* border: 1px solid #d9d9d9; */
    border-radius: 2px;
}

.ant-list-item-action {
    margin: 0;
}

.ant-list-bordered.ant-list-lg .ant-list-item {
    padding: 10px 24px;
}

/* .sider .item{
  
  
  
} */
.lil-title:hover {
    color: blue;
    cursor: pointer;
}

.sider .item:first-child {
    border-top: 2px solid #999;
}

/* #img-notice {
  position: fixed;
  bottom: 5vh;
  right: 3vw;
  width: 15vw;
} */
/* #img-back {
  position: absolute;
  top: 7vh;
  right: 11vw;
  width: 2vw;
} */
.ant-pagination {
    position: fixed;
    margin-top: 10px;
    left: 67vw;
}

.pagination-notice {
    width: 28vw;
    left: 550px;
    bottom: 9vh;
}
</style>
